<template>
  <div class="main" style="position: relative">
    <canvas id="myCanvas" ref="canvas" width="1200" height="300"></canvas>
    <img
      @click="handleClickImage"
      src="../../../../assets/images/one-key.ea1967c7.png"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
const emits = defineEmits(['handleGoDetails']);
const props = defineProps({
  screenNum: {
    type: Number,
    default: 0,
  },
});
// 创建 Canvas 的引用和一些动画需要用到的变量
const canvas = ref(null);
const numDots = 30;
const dots = ref([]);
let angle = 0;

// 处理点击图像事件
const handleClickImage = () => {
  // 判断筛选的数量是否超过限制
  if (props.screenNum > 20) {
    ElMessage({
      type: 'warning',
      message: '筛选的数量不能超过20个',
    });
    return;
  } else {
    // 如果没有超过限制，则执行动画效果并跳转页面
    moveDotsAwayFromCenterContinuously();
    setTimeout(moveDotsTowardsCenterContinuously, 1500);
  }
};

// 持续移动点向中心
const moveDotsTowardsCenterContinuously = () => {
  const animate = () => {
    moveDotsTowardsCenter();
    requestAnimationFrame(animate);
  };
  animate();
  emits('handleGoDetails');
};

// 持续移动点从中心向四周
const moveDotsAwayFromCenterContinuously = () => {
  const animate = () => {
    moveDotsAwayFromCenter();
    requestAnimationFrame(animate);
  };
  animate();
};

// 将点从画布中心向外移动
const moveDotsAwayFromCenter = () => {
  const centerX = canvas.value?.width / 2;
  const centerY = canvas.value?.height / 2;

  dots.value.forEach((dot) => {
    const [dx, dy, distance] = calculateDistance(
      dot.x,
      dot.y,
      centerX,
      centerY,
    );
    const moveDistance = 5;
    dot.x += (dx / distance) * moveDistance;
    dot.y += (dy / distance) * moveDistance;
  });
};

// 将点移向画布中心
const moveDotsTowardsCenter = () => {
  const centerX = canvas.value?.width / 2;
  const centerY = canvas.value?.height / 2;

  dots.value.forEach((dot) => {
    const [dx, dy, distance] = calculateDistance(
      centerX,
      centerY,
      dot.x,
      dot.y,
    );
    const moveDistance = 5;
    dot.x += (dx / distance) * moveDistance;
    dot.y += (dy / distance) * moveDistance;
  });
};

// 计算两点之间的距离和差值
const calculateDistance = (x1, y1, x2, y2) => {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return [dx, dy, distance];
};

// 组件挂载后执行的初始化操作
onMounted(() => {
  const ctx = canvas.value.getContext('2d');
  ctx.imageSmoothingEnabled = false;

  const centerX = canvas.value.width / 2;
  const centerY = canvas.value.height / 2;

  createAndInitDots(ctx, centerX, centerY);
  animate(ctx, centerX, centerY);
});

// 创建并初始化点
const createAndInitDots = () => {
  for (let i = 0; i < numDots; i++) {
    let dot = {
      x: Math.random() * canvas.value.width,
      y: Math.random() * canvas.value.height,
      radius: Math.random() * 8,
      vx: Math.random() * 1,
      vy: Math.random() * 1,
      color: i % 2 === 0 ? '#2bcbd5' : '#c0eff2',
    };
    dots.value.push(dot);
  }
};

// 动画循环函数
const animate = (ctx, centerX, centerY) => {
  const circleWidth = 154;
  const circleColor = '#a6e8ec';
  const helperCircleRadius = 70;
  const helperCircleColor = 'rgba(206, 242, 244,0.5)';

  // 旋转点的函数
  const rotatePoint = (x, y, angle) => {
    const newX = x * Math.cos(angle) - y * Math.sin(angle);
    const newY = x * Math.sin(angle) + y * Math.cos(angle);
    return { x: newX, y: newY };
  };

  // 绘制旋转后的圆
  const rotateAndDrawCircle = (x, y) => {
    const rotatedPoint = rotatePoint(x, y, angle);
    ctx.beginPath();
    ctx.arc(
      rotatedPoint.x + centerX,
      rotatedPoint.y + centerY,
      helperCircleRadius,
      0,
      Math.PI * 2,
    );
    ctx.fillStyle = helperCircleColor;
    ctx.fill();
    ctx.closePath();
  };

  // 绘制点
  const drawDots = () => {
    if (!canvas.value || !ctx) return; // 检查 canvas 和 ctx 是否初始化

    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);

    dots.value.forEach((dot) => {
      dot.x += dot.vx;
      dot.y += dot.vy;

      if (dot.x < 0 || dot.x > canvas.value.width) {
        dot.vx *= -1;
      }
      if (dot.y < 0 || dot.y > canvas.value.height) {
        dot.vy *= -1;
      }

      ctx.beginPath();
      ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
      ctx.fillStyle = dot.color;
      ctx.fill();
      ctx.closePath();
    });
  };

  // 绘制大圆
  const drawCircle = () => {
    ctx.beginPath();
    ctx.arc(centerX, centerY, circleWidth / 2, 0, Math.PI * 2);
    ctx.fillStyle = circleColor;
    ctx.fill();
    ctx.closePath();
  };

  // 绘制辅助圆
  const drawHelperCircles = () => {
    rotateAndDrawCircle(0, -15);
    rotateAndDrawCircle(13, -7);
    rotateAndDrawCircle(17, 7);
    rotateAndDrawCircle(0, 17);
    rotateAndDrawCircle(-17, 7);
    rotateAndDrawCircle(-17, -7);
  };

  // 渲染函数，包含绘制各个元素和动画效果
  const render = () => {
    drawDots();
    drawCircle();
    drawHelperCircles();
    angle += Math.PI / 50;
    requestAnimationFrame(render);
  };

  render();
};
</script>

<style lang="scss" scoped>
img {
  width: 154px;
  height: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 200;
}
</style>
